<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      单向数据流

        概念：数据的流向从高处往低处流，不能反过来

        Vue中组件需要遵循 单向数据流 的约定，表现就是 组件不允许修改 prop 数据

          1. 如果prop是一个引用类型的话，是可以通过属性去修改，而不报错的。
          2. 如果组件需要基于某个prop来做初始值的话，可以如下

            props: ["initialCount"],

            data() {
              return {
                count: this.initialCount,
              };
            },

          3. 如果组件需要基于某个prop来做二次处理之后使用的话，可以如下：
            
            props: ["items"],

            computed: {
              sortItems() {
                return [...this.items].sort();
              },
            },
   -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script>
      const Root = {
        data() {
          return {
            fruits: ["Orange", "Apple", "Banana"],
          };
        },

        template: `
          <div>
            <h1>Root</h1>

            <Hello initialCount="1" />

            <Hello initialCount="2" />

            <hr />

            <p>{{ fruits }}</p>

            <World :items="fruits" isShow />
          </div>
        `,
      };

      const Hello = {
        props: ["initialCount"],

        data() {
          return {
            count: this.initialCount,
          };
        },

        template: `
          <div>
            <h2>Hello</h2>
            <button @click="count++">{{ count }}</button>
          </div>
        `,
      };

      const World = {
        props: {
          items: Array,

          isShow: Boolean,
        },

        computed: {
          sortItems() {
            return [...this.items].sort();
          },
        },

        template: `
          <div>
            <h2>World</h2>  
            <ul>
              <li v-for="item in sortItems" :key="item">{{ item }}</li>  
            </ul>
          </div>
        `,
      };

      // 创建应用实例
      const app = Vue.createApp(Root);

      // 创建全局组件
      app.component("Hello", Hello);
      app.component("World", World);

      // 挂载应用到挂载点
      app.mount("#app");
    </script>
  </body>
</html>
